<template>
  <div class="data-summary">
    <div class="data-info">
      <p>数据汇总</p>
      <div style="margin-top: 8px">
        <Row>
          <i-col span="12" v-for="(item, index) in dataInfoList" :key="index">
            <data-card :obj="item"></data-card>
          </i-col>
        </Row>
      </div>
    </div>
    <div class="data-echart">
      <p>今日施工现场在场总人数实时数据</p>
      <staff-job-echart></staff-job-echart>
    </div>
  </div>
</template>

<script>
  import DataCard from "./DataCard";
  import StaffJobEchart from "./echart/StaffJobEchart";
  export default {
    name: "DataSummary",
    components: {StaffJobEchart, DataCard},
    data() {
      return {
        dataInfoList: [
          {
            backColor: 'rgb(231, 242, 252)',
            img: require('../../../assets/images/set.png'),
            desc: '项目个数（个）',
            data: '201'
          },
          {
            backColor: 'rgb(255, 238, 243)',
            img: require('../../../assets/images/money.png'),
            desc: '工程总造价（万元）',
            data: '900,000'
          },
          {
            backColor: 'rgb(255, 247, 233)',
            img: require('../../../assets/images/safe.png'),
            desc: '总用工量（人/天）',
            data: '2,726'
          },
          {
            backColor: 'rgb(234, 248, 241)',
            img: require('../../../assets/images/time.png'),
            desc: '在建项目（个）',
            data: '26'
          }
        ]
      }
    }
  }
</script>

<style lang="less" scoped>
  .data-summary {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    .data-info {
      width: 48%;
      height: 400px;
      padding: 0 10px;
      p {
        font-size: 16px;
        font-weight: bold;
        padding: 10px 0;
      }
    }
    .data-echart {
      width: 50%;
      height: 400px;
      padding: 10px;
      p {
        font-size: 16px;
        font-weight: bold;
        padding: 10px 0;
      }
    }
  }
</style>
